<!DOCTYPE html>
<html ng-app="myApp">
<head>
    <title>实时数据</title>
    @@include('./head_min.html')
<body ng-controller="dataCrl" ng-cloak>
    <!--header-->
    <div class="navbar navbar-inverse navbar-data navbar-fixed-top" id="menu">
        <div class="container">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                </button>
                <a class="navbar-brand" href="javascript:history.go(-1);"> <i class="fa fa-chevron-left"></i>
                </a>
                <a class="navbar-brand" href="index.html">后台数据管理系</a>
            </div>
            <div class="navbar-collapse collapse ">
                <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="data.html">实时数据</a>
                    </li>
                    <li>
                        <a href="data_rencently.html">近期概况</a>
                    </li>
                    <li>
                        <a href="data_to_yes.html">截止昨日</a>
                    </li>
                    <li>
                        <a href="data_today.html">今日即时数据</a>
                    </li>
                    <li>
                        <a href="data_day.html">单日汇总数据</a>
                    </li>
                    <li>
                        <a href="data_repair.html">数据检查与修复</a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- /header -->
    <div class="wrapper">
        <div class="container">
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <!--第一个-->
                <div class="panel panel-danger">
                    <div class="panel-heading " role="tab" v-for="n in 4" id='heading-{n}'>
                        <h4 class="panel-title">
                            <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne"> <i class="fa fa-paper-plane-o"></i>
                                三国威力加强版
                            </a>
                        </h4>
                    </div>
                    <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                        <div class="panel-body">
                            <!--图表-->
                            <div id="main" style="width:300px;height:300px;"></div>
                            <!--/图表-->
                            <table class="table table-bordered" id="data">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>
                                            <i class="fa fa-clock-o text-danger"></i>
                                            日期
                                        </th>
                                        <th>充值金额</th>
                                        <th>注册设备</th>
                                        <th>注册账号</th>
                                        <th>登陆账号</th>
                                        <th>登陆付费率</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="todo in todos">
                                        <td>{{$index+1}}</td>
                                        <td>{{todo.date}}</td>
                                        <td>{{todo.money}}</td>
                                        <td>{{todo.dele}}</td>
                                        <td>{{todo.reg}}</td>
                                        <td>{{todo.log}}</td>
                                        <td>{{todo.payrate}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--第二个-->
                <div class="panel panel-info">
                    <div class="panel-heading " role="tab" id="headingTwo">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
                                <i class="fa fa-paper-plane-o"></i>
                                皮卡丘
                            </a>
                        </h4>
                    </div>
                    <div id="collapseTwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingTwo">
                        <div class="panel-body">
                            <div id="hehehe" style="width:300px;height:300px;"></div>
                            <table class="table" id="data">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>
                                            <i class="fa fa-clock-o text-danger"></i>
                                            日期
                                        </th>
                                        <th>充值金额</th>
                                        <th>注册设备</th>
                                        <th>注册账号</th>
                                        <th>登陆账号</th>
                                        <th>登陆付费率</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="todo in todos">
                                        <td>{{$index+1}}</td>
                                        <td>{{todo.date}}</td>
                                        <td>{{todo.money}}</td>
                                        <td>{{todo.dele}}</td>
                                        <td>{{todo.reg}}</td>
                                        <td>{{todo.log}}</td>
                                        <td>{{todo.payrate}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
                <!--第三个-->
                <div class="panel panel-success">
                    <div class="panel-heading " role="tab" id="headingThree">
                        <h4 class="panel-title">
                            <a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseThree" aria-expanded="false" aria-controls="collapseThree">
                                <i class="fa fa-paper-plane-o"></i>
                                武林外传
                            </a>
                        </h4>
                    </div>
                    <div id="collapseThree" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingThree">
                        <div class="panel-body">
                            <div id="hehe" style="width:300px;height:300px;"></div>
                            <table class="table" id="data">
                                <thead>
                                    <tr>
                                        <th>序号</th>
                                        <th>
                                            <i class="fa fa-clock-o text-danger"></i>
                                            日期
                                        </th>
                                        <th>充值金额</th>
                                        <th>注册设备</th>
                                        <th>注册账号</th>
                                        <th>登陆账号</th>
                                        <th>登陆付费率</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    <tr ng-repeat="todo in todos">
                                        <td>{{$index+1}}</td>
                                        <td>{{todo.date}}</td>
                                        <td>{{todo.money}}</td>
                                        <td>{{todo.dele}}</td>
                                        <td>{{todo.reg}}</td>
                                        <td>{{todo.log}}</td>
                                        <td>{{todo.payrate}}</td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>

            <!--   end --> </div>
    </div>
</div>
<!--导航条-->
@@include('./footer.html')
<script src="../js/echarts.min.js"></script>
<!--公共js-->
@@include('./js.html')
<!--/公共js-->
<script type="text/javascript">
        //angular
        var app = angular.module('myApp', []);
        app.controller('dataCrl', function($scope) {
            $scope.todos = [{
                date: '2016-07-19',
                money: '125852',
                dele: '1582',
                reg: '52663',
                log: '25552',
                payrate: '14552'
            }, {
                date: '2016-07-20',
                money: '125852',
                dele: '1582',
                reg: '52663',
                log: '25552',
                payrate: '14552'
            }, {
                date: '2016-07-21',
                money: '125852',
                dele: '1582',
                reg: '52663',
                log: '25552',
                payrate: '14552'
            }, {
                date: '2016-07-22',
                money: '125852',
                dele: '1582',
                reg: '52663',
                log: '25552',
                payrate: '14552'
            }]
        });
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));
        var hehe = echarts.init(document.getElementById('hehe'));
        var hehehe = echarts.init(document.getElementById('hehehe'));
        // 指定图表的配置项和数据
        var option = {
            title: {
                text: ''
            },
            tooltip: {},
            legend: {
                data: ['销量']
            },
            xAxis: {
                data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"]
            },
            yAxis: {},
            series: [{
                name: '销量',
                type: 'bar',
                data: [5, 20, 36, 10, 10, 20]
            }]
        };
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
        hehe.setOption(option);
        hehehe.setOption(option);
        </script>
</body>
</html>
